﻿
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
   
    <script src="layer/jquery-1.8.3.js"></script>
    <script src="layer/layer.js"></script>

    <script type="text/javascript">
        $(function () {

            //信息框**********************************************************************************
            $("#test1").click(function () {
                layer.alert('见到你真的很高兴', { icon: 6 });
            });

            $("#test2").click(function () {
                //信息框-例2
                layer.msg('你确定你很帅么？', {
                    time: 0 //不自动关闭
                  , btn: ['必须啊', '丑到爆']
                  , yes: function (index) {
                      layer.close(index);
                      layer.msg('不要脸 O.o', {
                          icon: 6
                        , btn: ['嗷', '嗷', '嗷']
                      });
                  }
                });
            });

            $("#test3").click(function () {
                //信息框-例3
                layer.msg('这是最常用的吧');
            });

            $("#test4").click(function () {
                //信息框-例4
                layer.msg('不开心...', { icon: 5 });
            });

            $("#test5").click(function () {
                //信息框-例5
                layer.msg('玩命卖萌中', function () {
                    //关闭后的操作
                    layer.msg('卖萌可耻^_^');
                });
            });

            //**********************************************************************************
            $("#btn1").click(function () {
                //默认prompt
                layer.prompt(function (val, index) {
                    layer.msg('得到了' + val);
                    layer.close(index);
                });
            });
            $("#btn2").click(function () {
                //屏蔽浏览器滚动条
                layer.open({
                    content: '浏览器滚动条已锁',
                    scrollbar: false
                });
            });
            $("#btn3").click(function () {
                //弹出即全屏
                var index = layer.open({
                    type: 2,
                    content: 'https://www.baidu.com/',
                    area: ['320px', '195px'],
                    maxmin: true
                });
                layer.full(index);
            });
            $("#btn4").click(function () {
                //正上方
                layer.msg('灵活运用offset', {
                    offset: 't',
                    anim: 6
                });
            });

            //加载层**********************************************************************************
            $("#btn_1").click(function () {
                //加载层-默认风格
                layer.load();
                setTimeout(function () {//此处演示关闭
                    layer.closeAll('loading');
                }, 2000);
            });
            $("#btn_2").click(function () {
                //加载层-风格2
                layer.load(1);
                setTimeout(function () {
                    layer.closeAll('loading');
                }, 2000);
            });
            $("#btn_3").click(function () {
                //加载层-风格3
                layer.load(2);
                setTimeout(function () {
                    layer.closeAll('loading');
                }, 2000);
            });
            $("#btn_4").click(function () {
                //加载层-风格4
                layer.msg('加载中', {
                    icon: 16
                  , shade: 0.01
                });
            });
            $("#btn_5").click(function () {
                //打酱油
                layer.msg('打个酱油 ', { icon: 4 });
            });

            //tips层**********************************************************************************
            $("#btns_1").click(function () {
                //tips层-上
                layer.tips('上', '#id或者.class', {
                    tips: [1, '#0FA6D8'] //还可配置颜色
                });  
            });
            $("#btns_2").click(function () {
                //tips层-右
                layer.tips('默认就是向右的', '#id或者.class');
            });
            $("#btns_3").click(function () {
                //tips层-下
                layer.tips('下', '#id或者.class', {
                    tips: 3
                });
            });
            $("#btns_4").click(function () {
                //tips层-左
                layer.tips('左边么么哒', '#id或者.class', {
                    tips: [4, '#78BA32']
                });
            });
            $("#btns_5").click(function () {
                //tips层-不销毁之前的
                layer.tips('不销毁之前的', '#id或者.class', {
                    tipsMore: true
                });
            });




        });
    </script>

</head>
<body>
    <form id="myDiv" >
        <div class="div">
            <p>
                <input id="test1" type="button" value="test1 " />
            </p>
            <p>
                <input id="test2" type="button" value="test2 " />
            </p>
            <p>
                <input id="test3" type="button" value="test3 " />
            </p>
            <p>
                <input id="test4" type="button" value="test4 " />
            </p>
            <p>
                <input id="test5" type="button" value="test5 " />
            </p>
        </div>


        <div class="div1">
            <p>
                <input id="btn1" type="button" value="默认prompt " />
            </p>
            <p>
                <input id="btn2" type="button" value="屏蔽浏览器滚动条 " />
            </p>
            <p>
                <input id="btn3" type="button" value="弹出即全屏 " />
            </p>
            <p>
                <input id="btn4" type="button" value="正上方 " />
            </p>
            <p>
                <input id="btn5" type="button" value="test5 " />
            </p>
        </div>


        <div class="div2">
            <p>
                <input id="btn_1" type="button" value="默认" />
            </p>
            <p>
                <input id="btn_2" type="button" value="风格二 " />
            </p>
            <p>
                <input id="btn_3" type="button" value="风格三  " />
            </p>
            <p>
                <input id="btn_4" type="button" value="风格四  " />
            </p>
            <p>
                <input id="btn_5" type="button" value="打酱油 " />
            </p>
        </div>


        <div class="div3">
            <p>
                <input id="btns_1" type="button" value="上" />
            </p>
            <p>
                <input id="btns_2" type="button" value="右" />
            </p>
            <p>
                <input id="btns_3" type="button" value="下 " />
            </p>
            <p>
                <input id="btns_4" type="button" value="左" />
            </p>
            <p>
                <input id="btns_5" type="button" value="允许多个 " />
            </p>
        </div>
    </form>
</body>
</html>
